<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <link rel="stylesheet" href="../../css/aui.css">
	    <link rel="stylesheet" href="../../css/myDingdan.css">
        <style>
            .layui-m-layerchild{border-radius: 4px !important;width: 80%}
            #tk1{padding:0 0.775rem 1.5rem;}
			.tk1Tit{text-align: center;padding: 1.125rem 0;border-bottom: 1px solid #ccc;line-height: 1;font-size: .8rem}
			.tk1Cont{text-align: center;padding: 1.125rem 0 1.5rem;line-height: 1;font-size: .65rem}
            .tk1Btn{padding: 0 0.5rem}
            .tk1Btn button{border: 1px solid #fe0000;background: #fff;color: #fe0000;width: 30%;}
            .tk1Btn :last-child{background: #fe0000;color: #fff}
        </style>
        <script src="../../js/api.js"></script>
        <script src="../../js/libs/zepto.min.js"></script>
        <script src="../../js/libs/jquery-3.1.1.min.js"></script>
        <!--<script src="../../js/layer.js"></script>-->
        <script>
            $(function () {
                $('.teb > div').on('tap', function () {
                    $('.list').hide();
                    $('.teb > div').find('div').removeClass('md');
                    $(this).find('div').addClass('md');
                    var _id = $(this).find('div').attr('data-href');
                    $('#'+_id).show();
                });
                $('#box .WD-nav-box > div').on('tap', function () {
                    $('#box .WD-nav-box > div').removeClass('all');
                    $(this).addClass('all');
                });
                $('#box2 .WD-nav-box > div').on('tap', function () {
                    $('#box2 .WD-nav-box > div').removeClass('all');
                    $(this).addClass('all');
                });
                $('.remove').on('tap', function () {
                    var $this = $(this);
                    layer.open({
                        type: 1,
                        content: 'as',
                        success: function (index, layero) {
                            $('.layui-m-layercont').html(
                                '<div id="tk1">\n' +
                        '            <div class="tk1Tit">确定删除订单？</div>\n' +
                        '            <div class="tk1Cont">\n' +
                        '                删除之后将无法看到商城消费订单\n' +
                        '            </div>\n' +
                        '            <div class="tk1Btn">' +
                                '       <button class="tk1BtnClose">取消</button>' +
                                '       &nbsp;&nbsp;&nbsp;&nbsp;' +
                                '       <button class="tk1BtnEnter">确认</button>' +
                            '        </div>\n' +
                        '        </div>'
                            );
                            $('.tk1BtnClose').on('tap',function () {
                                layer.closeAll();
                            });
                            $('.tk1BtnEnter').on('tap',function () {
                                layer.closeAll();
                                $this.parents('.WD-nav').remove();
                            });
                        }
                    })
                });
            })
        </script>
	    <title>我的订单</title>
	</head>
	<body>
	<div id="app">


		<div class="teb">
			<div class="xSdd">
				<div class="md" data-href="box">
					线上商城订单
				</div>
				
			</div>
			<div class="xXdd">
				<div class="" data-href="box2">
					线下商城订单
				</div>
				
			</div>
		</div>
		
		<div id="box" class="list">
				<div class="WD-nav">
					<div class="WD-nav-box">
						<div class="all" @click="onlineOrder">
							全部
						</div>

						<div class="" @click="waitPayOrder">
							等待付款
						</div>
						<div class="">
							已取消
						</div>
						<div class="" @click="sendOrder">
							待发货
						</div>
						<div class="" @click="takeDelivery">
							待收货
						</div>
						<div class="" @click="evaluateOrder">
							待评价
						</div>
						<div class="" @click="refundOrder">
							待退款
						</div>
						<div class="" @click="refundOrder">
							已退款
						</div>
					</div>
					
				</div>
				<!--线上商城-->
				<div class="WD-nav" v-for=" o in allOrder">
					<div class="WD-info flex between">
						<div class="menDian flex">
							<img src="../../img/smlogo.png" />
							<p>{{o.catName}}</p>
							<div class="goIcon">
								<img src="../../img/goIcon.png" />
							</div>
						</div>
						<div class="zhuangT">
							{{o.orderStatus}}
						</div>
					</div>
					<div class="goods" v-for=" v in o.goods">
						<div class="goods-center flex ar">
							<div class="goodsImg">
								 <img :src="orImg(v.goodsImg)" />
							</div>
							<div class="goodsText">
								{{v.goodsName}}
							</div>
							<div class="goodsNum flex between">
								 <p class="red-color">￥{{returnFloat(v.goodsPrice)}}</p>
								 <p class="red-color">+{{v.payScore}}积分</p>
								 <p class="shuLiang">x{{v.goodsNum}}</p>
							</div>
						</div>
						
						<div class="payBy flex end">
							共<span>{{o.countGoodsNum}}</span>件商品  合计:￥{{returnFloat(o.totalMoney)}}+{{o.payScore}}积分(含运费￥{{returnFloat(o.deliverMoney)}})
						</div>
						
					</div>
					<!-- 订单状态 -3:用户拒收 -2:未付款的订单 -1用户取消 0待发货 1配送中 2用户确认收货 3系统确认收货-->
					<!-- orderStatus2 -->
					<div class="state">
						<div class="qrSh" v-if=" o.orderStatus2!=0 && o.orderStatus2!=2 && o.orderStatus2!=-1" @click="sureOrder(o)">
						确认收货
					</div>

						<div class="tiXing" v-if=" o.orderStatus2==0">
							提醒发货
						</div>
						<div class="pay" v-if=" o.orderStatus2==-2">
						立即支付
						</div>

						<div class="wuLiu" v-if=" o.orderStatus2==1">
						查看物流
						</div>

						<div class="pingJia" v-if=" o.orderStatus2==2" @click="location.href='../orderAndPay/appraise.html'">
						立即评价
						</div>
						<div class="pingJia" v-if=" o.orderStatus2==-3">
						用户拒绝
						</div>
						<div class="" v-if=" o.orderStatus2==2">
							申请退款
						</div>
						<div class="remove" >
							删除订单
						</div>
					</div>
				</div>
		</div>

		<!--线下商城-->
		
		<div id="box2" class="under-line list" style="display: none;">
			<div class="WD-nav">
					<div class="WD-nav-box">
						<div class="all" @click="underOrder(1)">
							待确认
						</div>
						<div class="" @click="underOrder(2)">
							已取消
						</div>
						<div class="" @click="underOrder(3)">
							已完成
						</div>
					</div>
					
				</div>
				
				<div class="WD-nav" v-for="o in allUnder">
					<div class="WD-info">
						<div class="dingD">
							订单编号:{{o.orderNo}}
						</div>
					</div>
					<div class="goods">
						<div class="goods-smy flex ar">
							<div class="goodsImg">
								 <img src="../../img/logo1.png" />
							</div>
							<div class="logoText">
								<p class="p1">{{o.shopName}}</p>
								<p class="p2">时间:<span>{{o.createTime}}</span></p>
								<p class="p3">备注:扫二维码付款</p>
							</div>
							<div class="goodsNum flex end">
								 <p class="red-color p4">￥{{returnFloat(o.totalMoney)}}</p>
							</div>
						</div>
						
						
					</div>
					<div class="state">
						<div class="qrSh" v-if="o.status==1">
							确认收货
						</div>

						<div class="" v-if="o.status==2">
						已取消订单
						</div>
						<div class="" v-if="o.status==3">
						已完成订单
						</div>
						<div class="remove">
							删除订单
						</div>
					</div>
				</div>
		</div>
	</div>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vue-resource.min.js"></script>
		<script src="../../js/aui-toast.js"></script>
		<script src="../../js/aui-scroll.js"></script>
		<script src="../../js/common.js"></script>
		<script src="./js/myOrder.js"></script>
	</body>
</html>
